<template>
	<view class="details-main">
		<view class="details-info-main flexR">
			<image src="http://43.139.86.28:5000/poster/H01.jpg" class="details-info-img">
			</image>
			<view class="details-info-box">
				<view class="details-info-name info">沙丘</view>
				<view class="details-info-tag info">
					<up-tag class="tag" text="166分钟" plain size="mini" type="warning"></up-tag>
					<up-tag class="tag" text="IMAX" plain size="mini" type="info"></up-tag>
				</view>
				<view class="info">观众评分：4.4</view>
				<view class="info">导演：XXXXXXXX</view>
				<view class="info text-over">主演：XXXXXX,XXXXXX,XXXXX</view>
				<view class="info">2024-05-06 大陆上映</view>
			</view>
		</view>
		<view class="time-list-mian">
			<scroll-view class="data-select-scroll-view-box" scroll-x style="width: 100vw;">
				<view class="data-list-box flexR">
					<view v-for="(item,index) in 10" :class="['data-list','flexC',dataListIndex==index?'on':'']"
						@click="switchData(index)">
						<view class="text">
							星期一
						</view>
						<view class="text">
							06-03
						</view>
					</view>
				</view>
			</scroll-view>
			<view class="time-list-mian">
				<scroll-view class="time-list-scroll-view-box" scroll-y style="height:120vw;">
					<view class="tiem-list-box flexR" v-for="item in 10">
						<view class="tiem-info">
							<view class="tiem">
								21:45
							</view>
							<view class="tip">
								23:55散场 免费停车
							</view>
						</view>
						<view class="tiem-info-money">
							<view class="money">
								￥19.9
							</view>
							<view class="tip del-text">
								市场价29.9
							</view>
						</view>
						<view class="buy-but flexR">
							<up-button type="primary" :plain="true" text="购 票" shape="circle"
								:customStyle="{height:'60rpx'}" color="#0aba93" @click="buyBut()"></up-button>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted
	} from 'vue'
	const dataListIndex = ref(0)
	const switchData = (index) => {
		dataListIndex.value = index
	}
	function buyBut(){
		wx.navigateTo({
			url: '/pages/details/chooseSeat',
		})
	}
</script>

<style leng="scss" scoped>
	.details-info-main {
		padding: 20rpx;
	}

	.details-info-img {
		width: 200rpx;
		height: 300rpx;
		margin-right: 20rpx;
	}


	.info {
		width: 400rpx;
		margin-bottom: 10rpx;

	}

	.tag {
		margin-right: 10rpx;
	}

	.info:last-child {
		margin-bottom: 0;
	}

	.time-list-mian {
		margin-top: 50rpx;
		border-top-right-radius: 15rpx;
		border-top-left-radius: 15rpx;
		overflow: hidden;
	}

	.data-select-scroll-view-box {
		width: 100vw;
		overflow-x: auto;
		width: auto;
		white-space: nowrap;
		background: #ffffff;
	}

	.data-list-box {
		width: auto;
	}

	.data-list {
		padding: 20rpx;
		align-items: center;
	}

	.on {
		background: #0aba93;
		color: #ffffff;
	}

	.time-list-mian {
		padding: 20rpx;
		background: #eeeeee;
	}

	.tiem-list-box {
		background: #ffffff;
		padding: 20rpx;
		border-radius: 15rpx;
		margin-bottom: 20rpx;
	}

	.tiem-info {
		flex: 1;
	}

	.tiem,
	.money{
		font-size: 40rpx;
	}
	.money{ 
		color: #0aba93;
	}
	.tip{
		font-size: 30rpx;
		margin-top: 10rpx;
		color: #aaaaaa;
	}
	.tiem-info-money{
		flex:0.5 !important
	}
	.buy-but{
		align-items: center;
	}
</style>
<style>
	page {
		background: #dbffc2;
	}
</style>